<template>
  <div class="topnav">
    <img src="@/assets/logo.png" alt="" class="nav-logo">
    <span class="nav-title" @click="$router.push('/')">Fiat</span>
    <n-button class="nav-item" @click="$router.push('/home')">
      <Home theme="outline" size="24" class="nav-item--icon"/>
      Home
    </n-button>
    <n-button class="nav-item" @click="$router.push('/dataM')">
      <CategoryManagement theme="outline" size="24" class="nav-item--icon"/>
      Data Management
    </n-button>
    <n-button class="nav-item" @click="$router.push('/modelD')">
      <Spanner theme="outline" size="24" class="nav-item--icon"/>
      Model Development
    </n-button>
    <n-button class="nav-item" @click="$router.push('/aiApp')">
      <MonitorOne theme="outline" size="24" class="nav-item--icon"/>
      AI Application
    </n-button>
  </div>
</template>

<script setup>
import {NButton} from 'naive-ui'
import { Home, CategoryManagement, Spanner, MonitorOne } from '@icon-park/vue-next'

</script>

<style scoped>
.topnav {
  display: flex;
  align-items: center;
  padding: 12px 40px;
  border-bottom: 1px solid rgb(232,233,235);
}
.nav-logo {
  width: 32px;
  margin-right: 12px;
}
.nav-title {
  font-size: 36px;
  font-weight: bold;
  line-height: 32px;
  position: relative;
  margin-right: 60px;
}
.nav-title:hover {
  cursor: pointer;
}
.nav-title:after {
  position: absolute;
  right: -30px;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  height: 150%;
  width: 2px;
  background-color: rgb(232,233,235);
}
.nav-item {
  height: 45px;
  font-size: 16px;
  border-radius: 10px;
  margin-right: 30px;
}
.nav-item--icon {
  margin-right: 6px;
  padding-top: 1px;
}
</style>
